<!-- 帖子弹窗组件，可公用  -->
<template>
  <el-dialog
      :fullscreen="isMobile"
      :show-close="false"
      custom-class="note-detail-dialog"
      @close="closeDetail"
    >
      <div class="note-detail-container">
        <!-- 左侧图片区域 - 全屏无间距 -->
        <div class="detail-left">
          <div class="image-container">
            <img :src="currentNote.images[currentImageIndex]" alt="note image" />
            <div v-if="currentNote.images.length > 1" class="side-nav-arrows">
              <div class="nav-arrow left" @click.stop="prevImage">
                <el-icon><ArrowLeft /></el-icon>
              </div>
              <div class="nav-arrow right" @click.stop="nextImage">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
            <div v-if="currentNote.images.length > 1" class="dot-indicators">
              <div
                v-for="(img, index) in currentNote.images"
                :key="index"
                class="dot"
                :class="{ active: currentImageIndex === index }"
                @click.stop="currentImageIndex = index"
              ></div>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 - 可滚动 -->
        <div class="detail-right">
          <div class="scroll-content">
            <!-- 用户信息区域 -->
            <div class="user-info">
              <el-avatar :size="50" :src="currentNote.avatar" />
              <div class="user-meta">
                <span class="username">{{ currentNote.name }}</span>
                <span class="follow-count">{{ currentNote.followers }} 粉丝</span>
              </div>
              <el-button
                v-if="!currentNote.isFollowing"
                type="danger"
                round
                class="follow-btn"
                @click="followAuthor"
              >
                关注
              </el-button>
              <el-button
                v-else
                type="info"
                round
                class="follow-btn"
                @click="followAuthor"
              >
                已关注
              </el-button>
            </div>

            <el-divider />

            <!-- 帖子内容 -->
            <div class="note-content">
              <h2>{{ currentNote.title }}</h2>
              <p>{{ currentNote.content }}</p>
            </div>

            <el-divider />

            <!-- 评论区 -->
            <div class="comments-section">
              <h3>评论 ({{ currentNote.comments.length }})</h3>
              <div class="comment-list">
                <!-- 遍历嵌套评论 -->
                <template v-for="comment in nestedComments" :key="comment.id"  >
                  <!-- 渲染当前评论 -->
                 <div class="comment-item-xian">
                  

                  <div
                    class="comment-item"
                    :style="{ 'margin-left': comment.depth * 20 + 'px' }"
                  >
                    <el-avatar :size="40" :src="comment.avatar" />
                    <div class="comment-content">
                      <div class="comment-header">
                        <span class="comment-author">{{ comment.username }}</span>
                        <span class="comment-time">{{ formatTime(comment.createtime) }}</span>
                      </div>
                      <p class="comment-text">{{ comment.content }}</p>
                      <div v-if="comment.images" class="comment-images">
                        <img
                          v-for="(img, idx) in comment.images"
                          :key="idx"
                          :src="img"
                          alt="comment image"
                          @click="showImagePreview(img)"
                        />
                      </div>
                      <div class="comment-actions">
                        <span @click="likeComment(comment)">
                          <el-icon :class="['icon', { 'dianzan': comment.isdianzan }]"><Star /></el-icon> {{ comment.likes }}
                        </span>
                        <span @click="replyToComment(comment)">回复</span>
                      </div>
                    </div>
                  </div>

                  <!-- 递归渲染子评论 -->
                  <template v-if="comment.replies && comment.replies.length">
                  <div
                    v-for="reply in comment.replies"
                    :key="reply.id"
                    class="comment-item"
                    :style="{ 'margin-left': reply.depth * 20 + 'px' }"
                  >
                    <el-avatar :size="30" :src="reply.avatar" />
                    <div class="comment-content">
                      <div class="comment-header">
                        <span class="comment-author">{{ reply.username }}</span>
                        <span class="comment-time">{{ formatTime(reply.createtime) }}</span>
                      </div>
                      <p class="comment-text">
                        <template v-if="reply.replyusername">
                          <span class="reply-mention">回复 @{{ reply.replyusername }} : </span>
                        </template>
                        {{ reply.content }}
                      </p>
                      <div v-if="reply.images" class="comment-images">
                        <img
                          v-for="(img, idx) in reply.images"
                          :key="idx"
                          :src="img"
                          alt="comment image"
                          @click="showImagePreview(img)"
                        />
                      </div>
                      <div class="comment-actions">
                        <span @click="likeComment(reply)">
                          <el-icon :class="['icon', { 'dianzan': reply.isdianzan }]"><Star /></el-icon> {{ reply.likes }}
                        </span>
                        <span @click="replyToComment(reply)">回复</span>
                      </div>
                    </div>
                  </div>
                </template>
                </div>
                </template>
              </div>
            </div>
          </div>
          <!-- 固定评论框 -->
          <div class="fixed-comment-input">
            <!-- 回复用户信息显示（当有回复对象时显示） -->
            <div v-if="replyingTo" class="reply-info">
              <span>回复 @{{ replyingTo.username }}</span>
              <el-icon class="close-reply" @click="cancelReply"><Close /></el-icon>
            </div>

            <!-- 正常模式（未聚焦输入框时） -->
            <div v-if="!isInputFocused" class="comment-normal-mode">
              <!-- 左侧输入框 -->
              <el-input
                v-model="newComment"
                placeholder="写下你的评论..."
                class="comment-input"
                @focus="handleInputFocus"
              />
              
              <!-- 右侧操作按钮 -->
              <div class="action-buttons">
                <div class="action-item" @click="toggleLikeNote">
                  <el-icon :class="['icon', { 'liked': currentNote.isliked }]"><Star /></el-icon>
                  <span>{{ currentNote.likes }}</span>
                </div>
                
                <div class="action-item" @click="toggleFavorite">
                  <el-icon :class="['icon', { 'favorited': currentNote.isFavorited }]"><Collection /></el-icon>
                  <span>{{ currentNote.collectioncount }}</span>
                </div>
                
                <div class="action-item" @click="handleInputFocus">
                  <el-icon class="icon"><ChatDotRound /></el-icon>
                  <span>{{ currentNote.comments.length }}</span>
                </div>
                
                <div class="action-item" @click="shareNote">
                  <el-icon class="icon"><Share /></el-icon>
                  <span>分享</span>
                </div>
              </div>
            </div>

            <!-- 编辑模式（聚焦输入框时） -->
            <div v-else class="comment-edit-mode">
              <!-- 文本输入区（可自动扩展高度） -->
              <el-input
                v-model="newComment"
                type="textarea"
                :rows="textAreaRows"
                placeholder="写下你的评论..."
                class="comment-textarea"
                @input="adjustTextareaHeight"
              />
              
              <!-- 底部操作栏 -->
              <div class="edit-actions">
                <!-- 左侧功能按钮 -->
                <div class="left-actions">
                  <el-icon class="action-icon" @click="insertMention"><User /></el-icon>
                  <!-- 表情包预留位置 -->
                  <el-icon class="action-icon" @click="showEmojiPicker"><HelpFilled /></el-icon>
                  <el-icon class="action-icon" @click="showFavoriteEmojis"><Star /></el-icon>
                  <el-icon class="action-icon" @click="uploadImage">
                    <input 
                      type="file" 
                      ref="imageInput" 
                      accept="image/*" 
                      style="display: none" 
                      @change="handleImageUpload"
                    />
                    <Picture />
                  </el-icon>
                </div>
                
                <!-- 右侧操作按钮 -->
                <div class="right-actions">
                  <el-button class="cancel-btn" @click="cancelComment">取消</el-button>
                  <el-button 
                    class="send-btn" 
                    type="danger" 
                    :disabled="!newComment.trim()"
                    @click="submitComment(currentNote.id)"
                  >
                    发送
                  </el-button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </el-dialog>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { Star, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 
 const props = defineProps({
   note: {
     type: Object,
     required: true
   },
   visible: {
     type: Boolean,
     default: false
   }
 })

 const currentNote = ref({
  id: null,
  images: [],
  title: '',
  content: '',
  tags: [],
  comments: []
})
 debugger;
  currentNote.value = props.note
 
 const emit = defineEmits(['update:visible', 'close', 'follow', 'message', 'comment', 'like-comment', 'reply'])
 
 const currentImageIndex = ref(0)
 const newComment = ref('')
 const isMobile = ref(false)
 
 // 检查是否为移动端
 const checkMobile = () => {
   isMobile.value = window.innerWidth < 768
 }
 
 // 关闭弹窗
 const handleClose = () => {
   emit('update:visible', false)
   emit('close')
 }
 
 // 上一张图片
 const prevImage = () => {
   currentImageIndex.value = (currentImageIndex.value - 1 + props.note.images.length) % props.note.images.length
 }
 
 // 下一张图片
 const nextImage = () => {
   currentImageIndex.value = (currentImageIndex.value + 1) % props.note.images.length
 }
 
 // 关注作者
 const followAuthor = () => {
   emit('follow', props.note.author)
 }
 
 
 // 发送私信
 const sendMessage = () => {
   emit('message', props.note.author)
 }
 
 // 格式化时间
 const formatTime = (time) => {
   return new Date(time).toLocaleString()
 }
 
 // 点赞评论
 const likeComment = (commentId) => {
   emit('like-comment', commentId)
 }
 
 // 回复评论
 const replyToComment = (comment) => {
   emit('reply', comment)
 }

//  const closeDetail = () => {
//   debugger;
//   showNoteDetail.value = false
// }
 
 // 提交评论
 const submitComment = () => {
   if (newComment.value.trim()) {
     emit('comment', {
       content: newComment.value,
       noteId: props.note.id
     })
     newComment.value = ''
   }
 }

 
 
 // 图片预览
 const showImagePreview = (img) => {
   // 这里可以实现图片预览功能
   console.log('预览图片:', img)
 }
 
 onMounted(() => {
   window.addEventListener('resize', checkMobile)
   checkMobile()
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', checkMobile)
 })
 </script>
 
 <style scoped>
 .note-detail-dialog {
   max-width: 99%;
   width: 1000px;
   height: 99vh;
   margin-top: 1vh !important;
 }
 
 .note-detail-container {
   display: flex;
   height: calc(80vh - 110px);
 }
 
 /* 左侧图片区域 - 全屏无间距 */
 .detail-left {
   flex: 3;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }
 
 .image-container {
   position: relative;
   height: 100%;
   width: 100%;
   background-color: #f5f5f5;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .image-container img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }
 
 /* 右侧内容区域 */
 .detail-right {
   flex: 2;
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
 .scroll-content {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
 }
 
 /* 固定评论框 */
 .fixed-comment-input {
   padding: 15px 20px;
   background-color: #fff;
   border-top: 1px solid #eee;
 }
 
 .comment-input {
   width: 100%;
 }
 
 /* 导航箭头 */
 .side-nav-arrows {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   pointer-events: none;
 }
 
 .nav-arrow {
   width: 40px;
   height: 40px;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   cursor: pointer;
   pointer-events: auto;
   transition: all 0.3s ease;
   margin: 0 15px;
 }
 
 .nav-arrow:hover {
   background-color: rgba(0, 0, 0, 0.8);
 }
 
 .nav-arrow .el-icon {
   font-size: 20px;
 }
 
 /* 圆点指示器 */
 .dot-indicators {
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 8px;
 }
 
 .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: rgba(216, 210, 210, 0.5);
   cursor: pointer;
   transition: all 0.3s ease;
 }
 
 .dot.active {
   background-color: #474747;
   transform: scale(1.2);
 }
 
 .dot:hover {
   background-color: rgba(78, 76, 76, 0.8);
 }
 
 /* 用户信息 */
 .user-info {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   margin-bottom: 15px;
 }
 
 .user-meta {
   flex: 1;
   margin-left: 15px;
   display: flex;
   flex-direction: column;
 }
 
 .username {
   font-weight: bold;
 }
 
 .follow-count {
   font-size: 12px;
   color: #999;
 }
 
 .follow-btn {
   margin-left: 10px;
   padding: 8px 15px;
 }
 
 /* 帖子内容 */
 .note-content h2 {
   margin-top: 0;
   margin-bottom: 15px;
 }
 
 .note-content p {
   white-space: pre-line;
   line-height: 1.6;
 }
 
 /* 评论区 */
 .comment-item {
   display: flex;
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eee;
 }
 
 .comment-content {
   flex: 1;
   margin-left: 10px;
 }
 
 .comment-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 5px;
 }
 
 .comment-author {
   font-weight: bold;
 }
 
 .comment-time {
   font-size: 12px;
   color: #999;
 }
 
 .comment-text {
   margin: 5px 0;
 }
 
 .comment-images img {
   max-width: 100px;
   max-height: 100px;
   margin-right: 5px;
   margin-top: 5px;
   cursor: pointer;
 }
 
 .comment-actions {
   display: flex;
   font-size: 12px;
   color: #999;
   margin-top: 5px;
 }
 
 .comment-actions span {
   margin-right: 15px;
   cursor: pointer;
 }
 
 .comment-actions .el-icon {
   margin-right: 3px;
 }
 
 /* 移动端适配 */
 @media (max-width: 768px) {
   .note-detail-container {
     flex-direction: column;
     height: calc(100vh - 150px);
   }
   
   .detail-left {
     height: 40vh;
   }
   
   .detail-right {
     height: calc(60vh - 100px);
   }
   
   .note-detail-dialog {
     margin-top: 0 !important;
     height: 100vh;
     width: 100vw;
     max-width: 100%;
   }
 }
 </style>